<template>
  <div class="Personal">
    <van-nav-bar title="个人中心" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="personalContainer" v-if="userInfo" @click="$router.push('/edit_data')">
      <img :src="$axios.defaults.baseURL + userInfo.head_img" alt="" class="personalImg" v-if="userInfo.head_img" />
      <img v-else src="../../assets/logo.png" alt="" class="personalImg" />
      <div class="info">
        <div class="name">
          <span class="iconfont iconxingbienan" v-if="userInfo.gender === 1"></span>
          <span v-else class="iconfont iconxingbienv"></span>
          {{ userInfo.nickname }}
        </div>
        <div class="date">{{ userInfo.create_date.split('T')[0] }}</div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>
    <NavBar labelText="我的跟帖" descText="发布的所有回复" @barClick="$router.push('/mycomments')" />
    <NavBar labelText="我的关注" descText="关注的用户" @barClick="$router.push('/follows')" />
    <NavBar labelText="我的收藏" descText="收藏" @barClick="$router.push('/star')" />
    <NavBar labelText="栏目管理" descText="栏目管理" @barClick="$router.push('/managecategory')" />
    <NavBar labelText="退出" descText="注销用户" @barClick="logout" />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'

import { Toast } from 'vant'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userInfo: null
    }
  },
  mounted() {
    this.$axios({
      url: '/user/' + localStorage.getItem('userId'),
      method: 'get'
    }).then(res => {
      const { message, data } = res.data
      if (message === '获取成功') {
        this.userInfo = data
      } else {
        this.$toast.fail('未登录')
        // this.$router.replace('/login')
      }
    })
  },
  methods: {
    handleBar(pageName) {
      console.log(pageName)
    },
    logout() {
      localStorage.removeItem('userId')
      localStorage.removeItem('token')
      this.$router.replace('/')
    },
    onClickLeft() {
      this.$router.back()
      Toast('返回')
    }
  }
}
</script>

<style lang="less" scoped>
.Personal {
  padding: 5.5556vw 5.5556vw;
  .personalContainer {
    display: flex;
    align-items: center;
    .personalImg {
      border-radius: 50%;
      background-color: #fff;
      width: 19.4444vw;
      height: 19.4444vw;
    }
    .info {
      flex: 1;
      margin-left: 4.1667vw;
      font-size: 3.889vw;
      .iconxingbienan {
        color: #80beec;
      }
      .iconxingbienv {
        color: #f03fbe;
      }
      .date {
        padding-top: 2.7778vw;
        color: #bbb;
      }
    }
  }
}
</style>
